<template>
  <div class="login-wrap">
    <div class="login">
      <h1>MMC移动指挥产品中心</h1>
      <van-form @submit="onSubmit" class="procenter">
        <van-field
          v-model="form.username"
          name="username"
          label="账号"
          label-width="4.2em"
          class="label_style"
           label-class="popup-value"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        
        <van-field
          v-model="form.password"
          type="password"
          name="password"
          label="密码"
          label-width="4.2em"
          class="label_style"
          label-class="popup-value"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          name="remember"
          class="label_style onlycell"
          label="记住密码"
          
          
        >
          <template #input>
            <!-- <van-switch v-model="form.remember" size="20" /> -->
            <van-checkbox v-model="form.remember" shape="square"></van-checkbox>
          </template>
        </van-field>

        <div>
          <van-button class="btn" round block type="info" native-type="submit"
            >登 录</van-button
          >
        </div>
      </van-form>
      <div class="footer">
        <a @click="$router.push('/home')">返回首页</a>
        <a @click="$router.push('/register')">新用户注册</a>
      </div>

      <!-- <TabBar /> -->
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import Cookies from "js-cookie";
import { decryptByAES } from "../../utils/secret";

export default {
  components: {
    // TabBar,
    // Form,
    // vanField: Field,
    // vanUploader: Uploader,
  },
  data() {
    return {
      form: {
        username: "",
        password: "",
        remember: false,
      },
    };
  },
  methods: {
    ...mapActions("user", ["Login"]),
    async onSubmit(value) {
      let resp = await this.Login(value);
      let data = resp.data;
      localStorage.setItem("token", JSON.stringify(data.token));
      localStorage.setItem("userInfo", JSON.stringify(data));
      if (resp.status === 1) {
        this.$router.push("/home");
      }
    },
  },
  created() {
    let username = Cookies.get("username");
    let password = Cookies.get("password");
    let remember = Cookies.get("remember");
    if (username && password) {
      this.form = {
        username: decryptByAES(username),
        password: decryptByAES(password),
        remember: Boolean(remember),
      };
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .label_style {
    color: black;
    font-size: 0.3rem;
  }
}
.login-wrap {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login {
  text-align: center;
  // width: 7rem;
  width: 80%;
  background-image: linear-gradient(134deg, #f2f9ff 0%, #ffffff 100%);
  border-radius: 4px;
  padding: 60px 30px;
  
  
  h1 {
    font-size: 18px;
    letter-spacing: 1px;
    padding-bottom: 40px;
  }
  .btn {
    height:40px;
    font-size: 0.28rem;
    border-radius: 3px;
   
  }
  .label_style {
    color: black;
    font-size: 0.3rem;
  }
}
.footer {
  
  display: flex;
  justify-content: space-between;
  padding: 10px 0.42667rem;
  a {
    color: #48a1fa;
    font-size: 0.3rem;
  }
}

</style>